<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>测试异步函数</button>
    <script>
      // 异步函数 不会阻塞 主线程代码的执行
      // console.log('top') // 1
      // // 异步函数
      // setTimeout(() => {
      //   console.log('mid') // 3
      // }, 100)
      // console.log('bottom') // 2
      /*
      1. 1秒之后打印1
      2. 1打印之后,等待2秒打印2
      3. 2打印之后,等待3秒打印3
      4. 3打印之后,等待4秒打印4
      */
      setTimeout(() => {
        console.log(1)
        setTimeout(() => {
          console.log(2)
          setTimeout(() => {
            console.log(3)
            setTimeout(() => {
              console.log(4)
              setTimeout(() => {
                console.log(5)
                setTimeout(() => {
                  console.log(6)
                  setTimeout(() => {
                    console.log(7)
                    setTimeout(() => {
                      console.log(8)
                      setTimeout(() => {
                        console.log(9)
                        setTimeout(() => {
                          console.log(10)
                          setTimeout(() => {
                            console.log(11)
                            setTimeout(() => {
                              console.log(12)
                              setTimeout(() => {
                                console.log(13)
                                setTimeout(() => {
                                  console.log(14)
                                  setTimeout(() => {
                                    console.log(15)
                                    setTimeout(() => {
                                      console.log(16)
                                      setTimeout(() => {
                                        console.log(17)
                                        setTimeout(() => {
                                          console.log(18)
                                        }, 18000)
                                      }, 17000)
                                    }, 16000)
                                  }, 15000)
                                }, 14000)
                              }, 13000)
                            }, 12000)
                          },11000)
                        }, 10000)
                      }, 9000)
                    }, 8000)
                  }, 7000)
                }, 6000)
              }, 5000)
            }, 4000)
          }, 3000)
        }, 2000)
      }, 1000)
    </script>
  </body>
</html>
